import React from 'react';
import {inject, observer } from 'mobx-react';
import { WeaTop,WeaFormItem,WeaUpload,WeaSearchGroup, WeaNewScroll} from 'ecCom';
import { Table, Button,Spin,Alert } from 'antd';
const toJS = mobx.toJS;
const columns = [
    {
        title: '行数',
        dataIndex: 'num',
        render:(text, record, index) =>{
            return <div style={{"color":record.color}} >{text}</div>
        }
    },
    {
      title: '标识',
      dataIndex: 'name',
      render:(text, record, index) =>{
        return <div style={{"color":record.color}} >{text}</div>
    }
    },
    {
      title: '提示信息',
      dataIndex: 'message',
      render:(text, record, index) =>{
          return <div style={{"color":record.color}} >{text}</div>
      }
    },
  ];
  
@inject("goalBaseStore")
@observer
export default class GoalImportLog extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
        }
        this.num = 1;
        this.timerID = 0;
    }

    
    componentDidMount() {
        this.timerID = setInterval(
            () => this.getData(),
            1000
        );
      }




    componentWillUnmount() {
        let {goalBaseStore} = this.props;
        goalBaseStore.reslutData = {};
        goalBaseStore.logList = [];

    }


    getData = ()=>{
        let {goalBaseStore} = this.props;
        let {loading} = goalBaseStore;
        if(!loading){
            clearInterval(this.timerID)
        }else{
            let {goalBaseStore} = this.props;
            goalBaseStore.getImportLog();
        }   
    }

    render(){
        let {goalBaseStore,loading} = this.props;
        let {reslutData,logList} = goalBaseStore;
        return (
            <div>
                <Spin spinning = {loading} tip="正在导入数据...">
                    <Alert message="导入数据提示"
                    description="导入过程中,请不要中断操作,以免数据出现错误"
                    type="info"
                    />
                </Spin>
                {!loading && <p style={{"text-align":"center","font-size":"14px","line-height":"50px","color":"red"}}>{reslutData.msg}</p>}              
                {loading ? <Table className="wea-workrelate-antd-table" bordered={true}  columns={columns} dataSource={toJS(logList)}></Table>:<Table className="wea-workrelate-antd-table" bordered={true}  columns={columns} dataSource={toJS(reslutData.list)}></Table>}    
            </div>
        )
    }
}